<template>
  <div class="webmusic">
    <div class="leftmenu">
    <!-- mv -->
    <div class="video">
      <h3>mv详情</h3>
      <video :src='palyurl' controls></video>
    </div>
    <!-- 作者详情 -->
    <div class="author">
       <div class="image">
         <img :src="musicerinfo.picUrl">
       </div>
       <div class="content">
         <p class="name">{{musicerinfo.name}}</p>
         <span class="briefdesc">{{musicerinfo.briefDesc}}</span>
       </div>
    </div>
    <!-- 歌曲详情 -->
    <div class="musicdeatilsinfo">
      <h1>{{mvinfo.name}}</h1>
      <div class="musicdesc">
        <span>发布时间:{{mvinfo.publishTime}}</span>
        <span class="playercount">播放数:{{mvinfo.playCount}}</span>
      </div>
    </div>
    <!-- 热门评论 -->
    <h2>热门评论</h2>
     <div v-for="item in hotcomments" :key="item.image" class="hotcomment">
       <div class="image">
         <img :src="item.user.avatarUrl">
       </div>
       <div class="commentinfo">
         <span class="nickname">{{item.user.nickname}}:</span>
         <span class="contnet">{{item.content}}</span>
         <p>{{item.time |commenttime}}</p>
       </div>
     </div>
     <h2>最新评论</h2>
        <div v-for="item in newscomments" :key="item.image" class="hotcomment">
       <div class="image">
         <img :src="item.user.avatarUrl">
       </div>
       <div class="commentinfo">
         <span class="nickname">{{item.user.nickname}}:</span>
         <span class="contnet">{{item.content}}</span>
         <p>{{item.time |commenttime}}</p>
       </div>
     </div>
     
         <!-- 分页 -->
      <el-pagination
      @current-change="handleCurrentChange"
      background
      :page-size="5"
      layout="prev, pager, next"
      :total='total'>
    </el-pagination>
  </div>
  <!-- 推荐 -->
  <div class="misiall">
    <h3>相关推荐</h3>
     <div v-for="item in similist" :key="item.id" class="misiitem" @click="palyer(item.id)">
       <div class="image">
         <img :src="item.cover">
       </div>
       <div class="contentmisi">
         <p class="name">{{item.name}}</p>
         <p class="authormisi">{{item.artistName}}</p>
       </div>
     </div>
  </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        mvid:'',
        palyurl:'', 
        mvinfo:{},
        musicerid:'',
        musicerinfo:{},
        offset:0,
        hotcomments:[],
        newscomments:[],
        total:0,
        similist:[]
      }
    },
    filters: {
       commenttime(time){
       const date =new Date(time)
       const y = date.getFullYear()
       const m = (date.getMonth() + 1 + '').padStart(2,'0')
       const d = (date.getDay() + '').padStart(2,'0')
       const hh =(date.getHours()+'').padStart(2,'0')
       const mm = (date.getMinutes() + '').padStart(2,'0')
       const ss = (date.getSeconds() + '').padStart(2,'0')     
       return  `${y}-${m}-${d} ${hh}:${mm}:${ss}`
      }
    },
    created () {
      this.mvid = this.$route.query.id
      this.getmvinfo()
    },
    methods: {
     async getmvinfo(){
       const res =await this.$http.get('mv/detail',{params:{
         mvid:this.mvid
       }})
       
       this.mvinfo = res.data.data
       this.musicerid =res.data.data.artistId
      const musicerres =await this.$http.get('artists',{params:{
        id:this.musicerid
      }})
       this.musicerinfo=musicerres.data.artist
       const comment =  await this.$http.get('comment/mv',{
         params:{
           id:this.mvid,
           limit:5,
           offset:this.offset
         }
       })
       this.hotcomments = comment.data.hotComments
       this.newscomments=comment.data.comments
       this.total =comment.data.total
       const getsimiinfo = await this.$http.get('simi/mv',{params:{
         mvid:this.mvid
       }})
        this.similist = getsimiinfo.data.mvs
        // 播放mv
       const player  =await this.$http.get('mv/url',{params:{
         id:this.mvid
       }})
       console.log(player)
       this.palyurl=player.data.data.url
      },
      handleCurrentChange(){
         this.offset +=5
         this.getmvinfo()
      },
      palyer(id){
        this.$router.push(`/mv?id=${id}`)
        this.$router.go()
      }

    }

  }
</script>

<style lang='less' scoped>
  .webmusic{
    margin:80px 0 0 250px ;
    display: flex;
    .leftmenu{
      width: 700px !important;
    h3{
      margin-bottom: 30px;
    }
    .video{
      width: 700px !important;
       height: 390px;
      video{
        width: 700px;
        height: 390px;
        border-style: none;
        object-fit:fill
      }
 
    }
    .author{
      margin-top: 100px;
      display: flex;
      .image{
        img{
          width: 86px;
          height: 86px;
          border-radius: 50%;
        }
      }
      .content{
        width: 600px;
        line-height: 20px;
        margin-left: 10px;
        .name{
          margin-top: 10px;
          font-size: 20px;
          font-weight: bolder;
        }
        .briefdesc{
          margin-top: 5px;
          display:inline-block;
          text-indent: 2em;
          font-size: 14px;
        }
      }
    }
    .musicdeatilsinfo{
      margin:50px 0 50px 0px;
     .musicdesc{
       span{
         display: inline-block;
         margin-top: 30px;
         color: #ccc;
       }
           .playercount{
             display: inline-block;
             margin-left: 35px;
           }
     }
    }
    .hotcomment{
      display: flex;
      margin: 10px 0  20px 0;
      .image{
        img{
          width: 60px;
          height: 60px;
          border-radius: 50%;
        }
      }
      .commentinfo{
        margin-left: 20px;
        line-height: 30px;
        .nickname{
          color: blue;
          display: inline-block;
          margin-right: 5px;
        }
        p{
          font-size: 14px;
          color: #ccc;
        }
      }
    }
    .el-pagination{
      margin: 30px 0 80px 300px;
    }
    }
    .misiall{
      width: 500px;
      margin: 0px 0 20px 30px;
      .misiitem{
        display: flex;
        margin-top: 10px;
        .image{
          img{
            width: 180px;
            height: 100px;
            border-radius: 10px;
          }
        }
        .contentmisi{
          margin: 40px 0 0 10px;
        }
      }
    }
    .misiitem:hover{
      background-color: #ccc;
    }
  }
</style>